<template>
  <div class="demo">
    <BaseResizeFrame>
    <div class="dashboard">
    <div class="hd">
      <div class="loct">
        <img src="@/assets/images/jz/location.png" />
        <span>烟台</span>
      </div>
      <div class="time-wrap">
        <span class="date">{{date}}</span>
        <span class="week">{{week}}</span>
        <div class="time-wp">
          <span class="time">{{time}}</span>
        </div>
      </div>
    </div>
    <div class="ctxt">
      <div class="lf">
        <div class="leftTitleBox">
        </div>
        <div class="leftTitleBoxContent">
          <Title text="物流车辆信息统计"></Title>
        </div>
        <carHeadData></carHeadData>
        <div class="rangeAndStar">
          <div class="carRangeContent">
            <SecondTitle text="车辆种类"></SecondTitle>
            <CarRangeChart ></CarRangeChart>
            <!-- <CarRangeChart ></CarRangeChart> -->
          </div>
          <div class="width190"></div>
          <div class="carStarContent">
            <SecondTitle text="车辆排放标准"></SecondTitle>
            <gasEmission></gasEmission>
            <!-- <gasEmission v-if="emissionStandard.length" :chartData="emissionStandard"></gasEmission> -->
          </div>
        </div>
        <div class="typeRange">
            <SecondTitle text="经营范围"></SecondTitle>
            <div class="typeRangeContent">
              <!-- <div class="rangeItem">
                <Process :name="'国歌国歌和'" :total="80" :rate="80"></Process>
              </div>
              <div class="rangeItem">
                <Process :name="'测试测试测试红红火'" :total="70" :rate="70"></Process>
              </div>
              <div class="rangeItem">
                <Process></Process>
              </div>
              <div class="rangeItem">
                <Process></Process>
              </div>
              <div class="rangeItem">
                <Process></Process>
              </div> -->
              <div class="rangeItem" v-for="(item, index) in listData" :key='index'>
                <Process :name="item.name" :total="item.total" :rate="item.rate"></Process>
              </div>
            </div>
         </div>
        <ExpressVichleSt />
      </div>
      <div class="center"></div>
      <div class="rg">
        <ExpressCarStatistics />
        <ExpressInfoStatistics />
      </div>
    </div>
    <QuickLink />
    </div>
  </BaseResizeFrame>
  </div>
</template>
<script>
import moment from 'moment'
import QuickLink from './components/quickLink.vue'
import ExpressCarStatistics from './components/express-car-statistics.vue'
import ExpressInfoStatistics from './components/express-info-statistics.vue'
import ExpressVichleSt from './components/express-vichle-st.vue'
import gasEmission from './components/gasEmission.vue'
import Title from './components/title.vue'
import carHeadData from './components/carHeadData.vue'
import SecondTitle from './components/second-title.vue'
import CarRangeChart from './components/carRangeChart.vue'
import Process from './components/process.vue'
import { getLeftNatureBusiness } from '@/api/express'
import BaseResizeFrame from './components/BaseResizeFrame.vue'
let interval = null
export default {
  components: {
    QuickLink,
    ExpressCarStatistics,
    ExpressInfoStatistics,
    ExpressVichleSt,
    gasEmission,
    Title,
    carHeadData,
    SecondTitle,
    CarRangeChart,
    Process,
    BaseResizeFrame
  },
  data() {
    return {
      date: moment().format('YYYY.MM.DD'),
      week: this.getWeek(),
      time: moment().format('hh:mm:ss'),
      listData: [],
      emissionStandard: [],
      vehicleCount: []
    }
  },
  mounted() {
    interval = setInterval(() => {
      this.date = moment().format('YYYY.MM.DD')
      this.week = this.getWeek()
      this.time = moment().format('hh:mm:ss')
    }, 1000)
    getLeftNatureBusiness().then(res => {
      if (res?.success) {
        const { leftNatureBusiness = [] } = res.result || {}
        this.listData = this.handleData(leftNatureBusiness)
      }
    })
  },
  unmounted() {
    interval && clearInterval(interval)
    interval = null
  },
  methods: {
    handleData3(data) {
      // const total = data.reduce((pre, cur) => {
      //   return pre.ycoordinate + cur.ycoordinate
      // })
      data.forEach(item => {
        item.value = item.ycoordinate
        item.name = item.xcoordinate
        // item.rate = (item.ycoordinate / total) * 100
      })
      return data
    },
    handleData2(data) {
      data.forEach(item => {
        item.value = item.ycoordinate
        item.name = item.xcoordinate
      })
      return data
    },
    getWeek (date) { // 参数时间戳
      const week = moment(date).day()
      switch (week) {
        case 1:
          return '星期一'
        case 2:
          return '星期二'
        case 3:
          return '星期三'
        case 4:
          return '星期四'
        case 5:
          return '星期五'
        case 6:
          return '星期六'
        case 0:
          return '星期日'
      }
    },
    handleData(data) {
      const max = this.findMAx(data)
      data.forEach(item => {
        item.total = item.ycoordinate
        item.rate = (item.ycoordinate / max) * 100
        item.name = item.xcoordinate
      })
      return data
    },
    findMAx(arr) {
      let max = arr[0].ycoordinate
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].ycoordinate > max) {
          max = arr[i].ycoordinate
        }
      }
      return max
    }
  }
}
</script>

<style lang="less">
  .demo{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000509;
  }
  .dashboard {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #000509 url(~@/assets/images/jz/bg.png) no-repeat;
    background-size: 13440px 4320px;
    .hd {
      position: relative;
      height: 440px;
      margin: 0 auto;
      background: url(~@/assets/images/jz/header.png) left top no-repeat;;
      // background-size: 13312px 440px;
      .loct {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 90px;
        top: 93px;
        img {
          width: 91px;
          height: 111px;
          margin-right: 24px;
        }
        span {
          font-family: YouSheBiaoTiHei;
          font-size: 128.26px;
          color: #D0F1FE;
          text-shadow: 0px 0px 24.18px 0px #003DFF;
        }
      }
      .time-wrap {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 90px;
        top: 93px;
        .date, .week {
          font-family: YouSheBiaoTiHei;
          font-size: 80px;
          color: #42ACFF;
        }
        .week {
          margin: 0 80px;
        }
        .time-wp {
          width: 530px;
        }
        .time {
          font-family: YouSheBiaoTiHei;
          font-size: 128.26px;
          color: #CAEFFE;
          text-shadow: 0px 0px 24.18px 0px #003DFF;
        }
      }
    }
    .ctxt {
      overflow: hidden;
      height: 3880px;
      .lf {
        float: left;
        // width: 3832px;
        width: 3254px;
        height: 3880px;
        margin-left: 578px;
        margin-top: 213px;
        position: relative;
        .leftTitleBox{
          width: 3235.25px;
          height: 132px;
          opacity: 0.14;
          /* V2 */
          background: #1B7EF2;
        }
        .leftTitleBoxContent{
          position: absolute;
          width: 3235.25px;
          height: 132px;
          float: left;
          top:0;
          left: 0;
        }
        .rangeAndStar{
          display: flex;
          justify-content: flex-start;
          // align-items: center;
          margin-top: 237px;
          height: 912px;
        }
        .carRangeContent{
          width: 1688px;
          height: 85px;
        }
        .width190{
          width: 190px;
          height: 85px;
        }
        .carStarContent{
          width: 1242px;
          height: 85px;
        }
        .typeRange{
          width: 3123px;
          height: 595px;
          .typeRangeContent{
            margin-top: 157px;
            overflow: scroll;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .rangeItem{
              width: 490px;
              margin-right: 135px;
            }
          }
        }
      }
      .center {
        float: left;
        width: 6295px;
        height: 3880px;
      }
      .rg {
        float: left;
        width: 3265px;
        height: 3880px;
        padding-right: 306px;
      }
    }
  }
</style>
